<template>
	<view class="newGradeRights" :style="{paddingBottom:isIphoneX?'210rpx':'134rpx'}">
		<tabs :list="tabsList" :show-bar="false" :current="current" :bold="false" @change="barChange" bg-color="#F8F8FA" height="178" font-size="24" inactive-color="#333"></tabs>
		<view class="swiperBox">
			<swiper class="swiper" :current="current" @change="shakyChange" :autoplay="false">
				<swiper-item v-for="(item,index) of rightsList" :key="index">
					<view class="contBox">
						<image :src="item.image" mode=""></image>
						<view class="cont">
							<view class="tit">{{item.subtitle}}</view>
							<view class="tips">{{item.content}}</view>
							<view class="btn" v-if="item.guide_text!=''">
								{{item.guide_text}}
								<u-icon name="arrow-right" color="#fff" size="18"></u-icon>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="upgradeBtn" :style="{paddingBottom:isIphoneX?'76rpx':''}">
			<view class="btn" @tap="strategyGo">升级攻略</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				// 导航
				tabsList:[],
				rightsList:[],
				current: 0,
				// 活动图切换
				shakyIndex:0,
			}
		},
		onLoad: function (option) {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.getGradeRights();
		},
		methods: {
			getGradeRights(){
				this.apiget('/fun/member/get-benefits',{}).then(res =>{
					if(res.data.status == 200 ) {
						this.rightsList = res.data.data.list;
						this.rightsList.forEach((v,i) => {
							let rightObj = {};
							rightObj.name = v.title;
							rightObj.icon = v.logo;
							this.tabsList.push(rightObj);
						});
					}
				})
			},
			// 升级攻略
			strategyGo(){
				uni.navigateTo({
					url: './memberStrategy'
				});
			},
			barChange(index){
				this.current = index;
			},
			// 活动图切换
			shakyChange(e){
				this.current = e.target.current;
			},
		}
	}
</script>

<style lang="scss">
	.newGradeRights{
		min-height: 100%;
		padding-bottom: 134rpx;
		background: #F8F8FA;
	}
	.swiperBox{
		padding: 0 32rpx;
		
		.swiper{
			width: 100%;
			height: 1068rpx;
			
			.contBox{
				position: relative;
				width: 100%;
				height: 100%;
				padding: 48rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.03);
				border-radius: 16rpx;
				
				image{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
				.cont{
					color: #fff;
					position: relative;
					.tit{
						margin-bottom: 70rpx;
						font-weight: 900;
						font-size: 48rpx;
						line-height: 66rpx;
						text-shadow: 2rpx 2rpx 0rpx #FF5238;
					}
					.tips{
						min-height: 210rpx;
						font-size: 28rpx;
						line-height: 44rpx;
					}
					.btn{
						display: inline-block;
						width: 196rpx;
						height: 64rpx;
						font-size: 24rpx;
						line-height: 64rpx;
						text-align: center;
						border: 2rpx solid #FFFFFF;
						box-sizing: border-box;
						border-radius: 30rpx;
						.u-icon{
							margin-left: 14rpx;
						}
					}
				}
			}
		}
	}
	.upgradeBtn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 8rpx 32rpx;
		background-color: #fff;
		
		.btn{
			height: 84rpx;
			font-size: 32rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(276.81deg, #FF5238 8.46%, #FFA360 89.67%);
			box-shadow: 0px 4rpx 8rpx rgba(255, 82, 56, 0.5);
			border-radius: 42rpx;
		}
	}
</style>
